<template>
  <div class="div">
    <receptionList
      :typeList="typeList"
      :data="dataList"
      :columns="columnsList"
      :pagination="pagination"
      @page-change="handlePageChange"
      @size-change="handleSizeChange"
      :current_head="current_head"
      @changeHeadStatus="changeHeadStatus"
    ></receptionList>
  </div>
</template>
<script>
import { online_huizhen, online_num } from "@/request/api";
import receptionList from "@/components/quickConsultation/reception_list.vue";
export default {
  components: {
    receptionList,
  },
  data() {
    return {
      current_head: "null",
      // 分页
      pagination: {
        page: 1,
        rows: 10,
        total: 0,
        pageSizes: [10, 20],
      },
      typeList: [
        {
          id: "null",
          name: "全部",
          num: 0,
          interface: "all",
        },
        {
          id: "0",
          name: "待回复", //未接诊
          num: 0,
          interface: "notStarted",
        },
        {
          id: "1",
          name: "进行中",
          num: 0,
          interface: "haveInHand",
        },
        {
          id: "2",
          name: "已结束",
          num: 0,
          interface: "completed",
        },
      ],
      columnsList: [
        {
          prop: "msg",
          label: "问诊信息",
          render: (m) => {
            return (
              <div class="f-row ">
                <div>
                  <img />
                </div>
                <div>
                  <div>
                    <span class=" fs-ss   mr-1">
                      {m.userVisitCard.username}
                    </span>
                    <span class=" fs-ss">
                      {m.userVisitCard.sex == 1 ? "男" : "女"}
                    </span>
                  </div>
                  <div class="fw-b fs-s ">{m.description}</div>
                </div>
              </div>
            );
          },
        },
        {
          prop: "createTime",
          label: "问诊时间",
        },
        {
          prop: "status",
          label: "状态",
          render: (m) => {
            return <div>{m.state == 1 ? "待接诊" : "已接诊"}</div>;
          },
        },
        {
          label: "操作",
          prop: "handle",
          render: (m) => {
            return (
              <div>
                <div class="zx-cor" onClick={this.zxFn}>
                  进入咨询
                </div>
              </div>
            );
          },
        },
      ],
      dataList: [],
    };
  },
  created() {
    this.getData();
    this.getTableNum();
  },
  methods: {
    //tabble数量
    getTableNum() {
      online_num()
        .then((res) => {
          this.typeList.forEach((i) => {
            for (const k in res.result) {
              if (i.interface == k) {
                i.num = res.result[k];
              }
            }
            i.interface == res.result;
          });
        })
        .catch((err) => {
          console.log(err, "获取在线问诊tabble数量错误");
        });
    },
    //点击tabble
    changeHeadStatus(e) {
      this.current_head = e;
      this.pagination.page = 1;
      this.getData();
    },
    //表格数据
    getData() {
      let status =
        this.current_head == "null" ? null : Number(this.current_head);
      online_huizhen({
        status,
        page: this.pagination.page,
        rows: this.pagination.rows,
      })
        .then((res) => {
          this.dataList = res.result.list;
          this.pagination.total = res.result.total;
        })
        .catch((err) => {
          console.log(err, "在线问诊列表失败");
        });
    },
    // 改变页码
    handlePageChange(page) {
      this.pagination.page = page;
      this.getData();
    },
    // 改变页数
    handleSizeChange(size) {
      this.pagination.rows = size;
      this.pagination.page = 1;
      this.getData();
    },
    zxFn() {
      // console.log(555);
      this.$router.push({
        path: "/chat",
      });
    },
  },
};
</script>
<style lang="less" scoped>
.el-card {
  /* width: 100%; */
}
.div {
  width: 100%;
  box-sizing: border-box;
}
.fs-s {
  font-size: 0.875rem;
}
.fs-ss {
  font-size: 0.75rem;
}
.fw-b {
  font-weight: bolder;
}
.zx-cor {
  color: var(--themeCOlor);
  cursor: pointer;
}
</style>